<template>
<div class="pay">
  <h4>
    <span></span>
    <span>订单提交成功，请您及时付款，以便尽快为您发货~~</span>
  </h4>
  <div class="paymark">
    <span>请您在提交订单<em>4小时</em>之内完成支付，超时订单会自动取消。订单号：{{ this.$route.query.orderId }}</span>
    <span>应付金额:&nbsp;<em>￥{{ payInfo.totalFee }}</em></span>
  </div>
  <div class="check-info">
    <h4>重要说明:</h4>
    <ol>
      <li>尚品汇商城支付平台目前支持<em>支付宝</em>支付方式。</li>
      <li>其它支付渠道正在调试中，敬请期待。</li>
      <li>为了保证您的购物支付流程顺利完成，请保存以下支付宝信息。</li>
    </ol>
    <h4>支付宝账户信息：（很重要，请保存！！！）</h4>
    <ul>
      <li>支付帐号：11111111</li>
      <li>密码：111111</li>
      <li>支付密码：111111</li>
    </ul>
  </div>
  <div class="check-steps">
<h5>支付平台</h5>
    <div class="step-cont">
      <a href="javascript:void(0)" @click="value=0" :class="{active:value==0}"><span></span></a>
      <a href="javascript:void(0)" @click="value=1" :class="{active:value==1}"><span></span></a>
    </div>
    <div class="hr"></div>
    <div class="submit" @click="isShow=true"><button>立即支付</button></div>
    <div class="otherpay">
      <h5>其他支付方式</h5>
      <div class="step-content">
      <span>微信支付</span>
      <span >中国银联</span>
      </div>
    </div>
  </div>
  <div class="weixinpay" v-show="isShow">
    <div>
      <span>使用微信扫码支付</span>
      <img src="../../assets/img/zhifu.jpg" style="height: 148px;width: 148px;margin:40px 180px"/>
      <button style="margin-left: 150px" @click="diffcultPro">支付遇到问题</button>
      <button  @click="successPay">我已成功支付</button>
    </div>
    <div ></div>
  </div>
</div>
</template>

<script>
export default {
  name: "Pay",
  data(){
    return{
      payInfo:{},
      value:0,
      isShow:false
    }
  },
  mounted(){
   this.getPayInfo()
  },
  methods:{
    successPay(){
      this.isShow=false
      this.$message({
        showClose: true,
        message: '感谢你的馈赠,欢迎下次光临',
        type: 'success'
      });
      this.$router.push('/paySuccess')
    },
    diffcultPro(){
      this.isShow=false
      this.$message({
        showClose: true,
        message: '警告哦,赶紧把钱给我付了',
        type: 'warning'
      });
    },
    async getPayInfo(){//不能在生命周期函数里面写async
      let result=await this.$API.reqPayInfo(this.$route.query.orderId)
      console.log(result)
      this.payInfo=result.data.data
    }
  }
}
</script>

<style scoped lang="less">
.weixinpay{
 position: fixed;
  height: 100%;
  top:0;
  left: 0;
  right: 0;
  bottom:0;
  div:nth-child(2){
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.5;
  }
  div:nth-child(1){
    opacity: 1;
    z-index: 2006;
    border-radius: 4px;
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height:400px;
    background-color: #fff;
    span{
     display: flex;
      justify-content: center;
      margin-top: 30px;
      font-size: 18px;
      color: #303133;
    }
    button{
      display: inline-block;
      font-size: 12px;
      border-radius: 3px;
      padding: 9px 15px;
      border: 1px solid #dcdfe6;
    }
    button:nth-child(4){
      margin-left: 20px;
      background-color: #409eff;
      border-color: #409eff;
      color: #fff;
    }
  }
}
.active{
  border: 1px solid red!important;
}
.step-content{
  margin: 0px 10px 12px 20px;
  font-size: 12px;
}
.submit{
  text-align: center;
  height: 80px;
  line-height: 80px;
 button{
   background-color: rgb(225, 37, 27);
   color: rgb(255, 255, 255);
   text-align: center;
   padding: 15px 45px;
   font-size: 18px;
   border: none;
 }
}
.hr{
  height: 1px;
  background-color: #ddd;
}
.step-cont{
  margin: 0 10px 12px 20px;
  a:nth-child(1){
    margin-right: 5px;
    span{
    background: url("http://xpya.top/img/pay2.c02be0c6.jpg");
    }
  }
    a {
      width: 124px;
      height: 43px;
      display: inline-block;
      padding: 5px 10px;
      border: 1px solid #ddd;
      span {
        background: url("../../assets/img/weichat.jpg");
        display: inline-block;
        width: 124px;
        height: 34px;
      }
    }
}
.check-steps{
  border: 1px solid #ddd;
  padding: 25px;
  h5{
  font-size: 12px;
    margin: 20px 0;
  }
}
.check-info{
  border: 2px solid #e1251b;
  padding-left: 25px;
  padding-bottom: 15px;
  margin-bottom: 10px;
  ol{
    padding-left: 25px;
    font-size: 14px;
    li{
      height: 24px;
      list-style-type: decimal;
      em{
        color: #e1251b;
        font-style: normal;
        font-weight: 700;
      }
    }
  }
  ul {
    padding-left: 25px;
    font-size: 14px;
    li {
      list-style-type: disc;
    }
  }
  h4{
    height: 21px!important;
    margin: 9px 0;
    font-size: 14px;
    line-height: 21px;
    color: #e1251b;
    font-weight: normal;
  }
}
.paymark{
  width:100%;
  height: 28px;
  em{
    color:rgb(225, 37, 27);
    font-style: normal;
  }
  span:nth-child(1){
    font-size: 12px;
    padding-left: 35px;
    float: left;
  }
  span:nth-child(2){
    font-size: 15px;
    float: right;
    color:rgb(51, 51, 51);
    em{
      font-size: 18px;
      color:rgb(225, 37, 27)
    }
  }
}
.pay{
  width: 1200px;
  margin: 0 auto 20px;
  h4{
    height: 35px;
    font-size: 14px;
    span:nth-child(1){
      vertical-align: middle;
      display: inline-block;
      width: 30px;
      height: 30px;
      background: url('http://xpya.top/img/icon.f599907c.png') no-repeat 0 0;
    }
    span:nth-child(2){
      color :rgb(51, 51, 51);
      font-weight :700;
      padding: 0 8px;
    }
}
}
</style>
